<template>
  <div>
    <w-section title="MD5">
      <el-button size="mini" type="primary" @click="md5PopClick('md5')">MD5</el-button>
      <el-button size="mini" type="primary" @click="md5PopClick('sha1')">sha1</el-button>
      <el-button size="mini" type="primary" @click="md5PopClick('sha256')">sha256</el-button>
      <el-button size="mini" type="primary" @click="md5PopClick('sha512')">sha512</el-button>
    </w-section>
    <w-section title="Hmac">
      <el-button size="mini" type="primary" @click="md5PopClick('md5', 'Hmac')">Hmac(MD5)</el-button>
      <el-button size="mini" type="primary" @click="md5PopClick('sha1', 'Hmac')">Hmac(SHA1)</el-button>
      <el-button size="mini" type="primary" @click="md5PopClick('sha256', 'Hmac')">Hmac(sha256)</el-button>
      <el-button size="mini" type="primary" @click="md5PopClick('sha512', 'Hmac')">Hmac(sha512)</el-button>
    </w-section>

    <!--提示框-->
    <el-dialog :title="title" :visible.sync="md5IsShow" width="800px">
      <el-form ref="form" :model="form" label-width="60px">
        <el-form-item label="Input">
          <el-input v-model="form.value" type="textarea"/>
        </el-form-item>
        <el-form-item v-if="form.hmac" label="Key">
          <el-input v-model="form.key" type="textarea"/>
        </el-form-item>
        <el-form-item v-if="form.data" label="Data">
          <el-card :body-style="{ padding: '0px 15px' }" class="box-card">
            <span class="w-text-warp">{{ form.data }}</span>
          </el-card>
        </el-form-item>
        <el-form-item>
          <el-button
            :disabled="form.hmac ? (!form.key || !form.value) : !form.value"
            class="float-right"
            style="margin-left: 20px"
            size="mini"
            type="primary"
            @click="md5OkBtnClick"
          >确 定</el-button>
          <el-button size="mini" class="float-right" @click="md5IsShow = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import WSection from '../../components/section.vue'
import API from '@/api/apis'
import { post } from '@/api/ajax'

import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {
    WSection
  }
})
export default class WebToolCryptoMd5 extends Vue {
md5IsShow = false
      form = {
        type: '',
        key: '',
        value: '',
        data: '',
        hmac: ''
      }
      title = ''

      md5PopClick(type: string, hmac: string) {
      this.form.hmac = hmac
      this.form.key = ''
      this.form.value = ''
      this.form.data = ''
      this.form.type = type
      this.title = `${hmac ? 'hmac(' : ''}${type}${hmac ? ')' : ''}`
      this.md5IsShow = true
    }
    md5OkBtnClick() {
      post(API.coding.md5, {
        key: this.form.key,
        type: this.form.type,
        input: this.form.value
      }).then((data: any) => {
        this.form.data = data
      }).catch(() => {})
    }
}


</script>

<style scoped>
</style>
